<template>
    <!---v3不再强制指定vue文件只有一个根节点了,可以有多个节点,v2则报错-->
    <div>
        <el-input-number v-model="number" :min="1" :max="10" @change="handleChange" />
    </div>
    <div></div>
</template>
<script>
//setup函数式组件的概念在于模块化，对于大型或者复杂项目有一定的优势,因此，相关的钩子函数都是按需导入的
import { onMounted, reactive, ref, toRefs } from "vue";
export default {
    setup() {
        //通过ref声明一个数据驱动的变量
        const number = ref(0)
        const state = reactive({
            name: '驱动'
        })
        //生命周期函数都是箭头函数，锁定this的作用
        onMounted(() => {
            console.log((number));
        })
        //所有要用于模板上的数据都需要return出来
        return {
            number,
            state
        }
        const handleChange = handleChange((value) => {
            console.log(value)
        })
    }
}
</script>
<style scoped></style>